.fl {
    float: left;
}

.fr {
    float: right;
}

.alignc {
    text-align: center;
}

.alignl {
    text-align: left;
}

.alignr {
    text-align: right;
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.w100 {
    width: 100%;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.primary {
    color: $primary;
}

@for $i from 1 through 10 {
    $v: 10;
    .mt#{$v * $i} {
        margin-top: #{$v * $i}px;
    }
    .mb#{$v * $i} {
        margin-bottom: #{$v * $i}px;
    }
    .ml#{$v * $i} {
        margin-left: #{$v * $i}px;
    }
    .mr#{$v * $i} {
        margin-right: #{$v * $i}px;
    }
    .pt#{$v * $i} {
        padding-top: #{$v * $i}px;
    }
    .pb#{$v * $i} {
        padding-bottom: #{$v * $i}px;
    }
    .pl#{$v * $i} {
        padding-left: #{$v * $i}px;
    }
    .pr#{$v * $i} {
        padding-right: #{$v * $i}px;
    }
}
